<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css" />
	<style type="text/css">
		.layui-table-page {text-align: center;}
		.layui-table-view {margin: 0}
	</style>
</head>
<body>
	<ul class="layui-nav" style="text-align: center">
		<li class="layui-nav-item layui-this">
			<a href="emps.html">员工</a>
		</li>
		<li class="layui-nav-item">
			<a href="depts.html">部门</a>
		</li>
	</ul>
	<form class="layui-form">
		<div class="layui-form-item" style="width: 1004px;margin: 15px auto">
			<input type="text" id="empName" name="empName" class="layui-input layui-input-inline" placeholder="请输入要查询的员工名" autocomplete="off" />
			<input type="text" id="email" name="email" class="layui-input layui-input-inline" placeholder="请输入要查询的员工邮箱" autocomplete="off" />
			<div class="layui-input-inline" style="width: 200px">
				<select name="sex" id="sex" class="layui-select" lay-filter="sex">
					<option value="">请选择要查询的员工性别</option>
					<option value="M">男</option>
					<option value="W">女</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 200px">
				<select name="dId" id="dId" class="layui-select" lay-filter="dId">
					<option value="">请选择要查询的员工部门</option>
				</select>
			</div>
			<button class="layui-btn" type="button" id="search">
				<i class="layui-icon layui-icon-search"></i>查询
			</button>
			<button class="layui-btn layui-btn-danger" type="button" id="reset">
				<i class="layui-icon layui-icon-refresh"></i>重置
			</button>
		</div>
	</form>
	<table class="layui-hide" id="list" lay-filter="list"></table>
	<script type="text/html" id="toolbar">
		<button class="layui-btn layui-btn-sm" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>添加
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>
	<script type="text/html" id="bar">
		<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i>编辑
		</button>
		<button class="layui-btn layui-btn-xs" lay-event="look">
			<i class="layui-icon layui-icon-search"></i>查看
		</button>
	</script>
</body>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script>
	layui.use(["element", "form"], function () {
		var element = layui.element;
		var form = layui.form;
		$.ajax({
			url: baseUrl + "depts",
			success: function (res) {
				$.each(res.data.list, function (index, item) {
					$("#dId").append("<option value='"+item.deptId+"'>"+item.deptName+"</option>");
				});
				form.render();
			}
		});

		form.on("select(dId)", function () {
			initTable({
				"empName": $("#empName").val(),
				"email": $("#email").val(),
				"sex": $("#sex").val(),
				"dId": $("#dId").val()
			});
		});

		form.on("select(sex)", function () {
			initTable({
				"empName": $("#empName").val(),
				"email": $("#email").val(),
				"sex": $("#sex").val(),
				"dId": $("#dId").val()
			});
		});
	});
	
	function initTable(param) {
		layui.use("table", function () {
			var table = layui.table;
			table.render({
				elem: '#list',
				height: 524,
				url: baseUrl + "emps",
				toolbar: "#toolbar",
				method: "post",
				contentType: 'application/json',
				where: {
					example: param
				}, request: {
					pageName: 'pageNum',
					limitName: 'pageSize'
				}, cols: [[
					{type: 'checkbox', fixed: 'left'},
					{field:'empName', title:'用户名', align: "center"},
					{field:'email', title:'邮箱', align: "center"},
					{title:'性别', align: "center",
						templet: function (d) {
							switch (d.sex) {
								case "M":return "男";
								case "F":return "女";
							}
						}
					}, {title:'部门', align: "center",
						templet: function (d) {
							return d.department.deptName;
						}
					}, {fixed: "right", title: "操作", align: "center", toolbar: "#bar"}
				]], page: {layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']},
				parseData: function (res) {
					return {
						"code": 0,
						"count": res.data.total,
						"data": res.data.list
					};
				}
			});

			table.on("toolbar(list)", function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case "add":
						layer.open({
							type: 2,
							title: '添加员工',
							area: ['455px', '340px'],
							scrollbar: false,
							closeBtn: 0,
							content: 'emp/add.html'
						});
						break;
					case "del":
						var data = checkStatus.data;
						if (data.length === 0) {
							layer.msg("请选择要删除的员工");
							return false;
						}
						var names = [];
						$.each(data, function (index, item) {
							names.push(item.empName);
						});
						layer.confirm("确认要删除"+names+"吗？", {icon: 3},
							function (index) {
								$.ajax({
									url: baseUrl + "emp",
									type: "delete",
									data: JSON.stringify(data),
									contentType: "application/json",
									success: function () {
										layer.close(index);
										layer.msg("删除成功！", {icon: 1, time: 1000});
										setTimeout(function () {
											initTable();
										}, 1000);
									}
								});
							},
							function (index) {layer.close(index);}
						);
						break;
				}
			});
			
			table.on("tool(list)", function (obj) {
				var empId = obj.data.empId;
				switch (obj.event) {
					case "edit":
						layer.open({
							type: 2,
							title: '修改员工',
							area: ['455px', '340px'],
							scrollbar: false,
							content: 'emp/edit.html?empId=' + empId
						});
						break;
					case "look":
						layer.open({
							type: 2,
							title: '查看员工',
							area: ['310px', '370px'],
							scrollbar: false,
							content: 'emp/look.html?empId=' + empId
						});
						break;
				}
			});
		});
	}
	initTable();

	$("#search").on("click", function () {
		initTable({
			"empName": $("#empName").val(),
			"email": $("#email").val(),
			"sex": $("#sex").val(),
			"dId": $("#dId").val()
		});
	});
	
	$("#empName").on("input", function () {
		initTable({
			"empName": $("#empName").val(),
			"email": $("#email").val(),
			"sex": $("#sex").val(),
			"dId": $("#dId").val()
		});
	});
	
	$("#email").on("input", function () {
		initTable({
			"empName": $("#empName").val(),
			"email": $("#email").val(),
			"sex": $("#sex").val(),
			"dId": $("#dId").val()
		});
	});
	
	$("#reset").on("click", function () {
		$(".layui-form input, select").val("");
		initTable();
	});
</script>
</html>